<template>
  <div>
    <h3>全部课程</h3>
    <hr>
    <span class='big_classSort_title' style="color: #808080">课程方向&nbsp;:</span>
    <ul class='bigbig_classSort_value_ul'>
      <li class='bigbig_classSort_value_li' v-for="n in 4">1+{{n}}</li>
    </ul>
    <p>&nbsp;</p>
    <hr>
    <span class='big_classSort_title' style="color: #808080">课程方向&nbsp;:</span>
    <ul class='bigbig_classSort_value_ul'>
      <li class='bigbig_classSort_value_li' v-for="n in 20">1+{{n}}</li>
    </ul>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="row">
          <div v-for="n in 4">
            <div class="col-md-3" v-for="n in 4">
              <div class="one_class">
                <div class="thumbnail">
                  <img src="../pic/test/2.jpg" class="one_class_pic">
                  <div class="caption">
                    <h4 class="text-center">PHP代码审计
                      <small>&nbsp;&nbsp;网络安全</small>
                    </h4>
                    <p>
                      讲师：胡菜鸟
                      <span class="glyphicon glyphicon-king" style="float: right;">高级</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <p class="text-center">
            <button type="button" class="btn btn-info" style="width: 30%;">更多课程</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'courseIndex',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

